<!--
@name:dialogFriendSetting
@author:Zhenglei
@date:11:13
@description:dialogFriendSetting
@update:2022/8/2211:13
-->
<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="50%">
    <el-form :model="subData"
             label-position="right"
             label-width="150px"
             ref="formModelRef"
             :rules='formModelRules'>
      <el-form-item label="年龄段：" prop="ageStageId">
        <el-select v-model="subData.ageStageId"
                   filterable
                   class="w-300"
                   placeholder="请选择年龄段">
          <el-option v-for="item in ageDataSource"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-select v-model="subData.sex"
                   class="w-300"
                   placeholder="请选择性别">
          <el-option v-for="item in sexDataSource"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="推送亲友角色：" prop="memberAgeBindRoleConfigs">
        <el-select v-model="subData.memberAgeBindRoleConfigs"
                   filterable
                   class="w-300"
                   multiple
                   placeholder="请选择角色">
          <el-option v-for="item in roleDataSource"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


    </el-form>
    <p align="center">
      <el-button @click="modalClose"
                 type="info">取 消
      </el-button>
      <el-button type="primary"
                 v-prevent-re-click
                 @click="handleSave()">保 存
      </el-button>
    </p>

  </el-dialog>

</template>

<script>
export default {
  name: "dialogFriendSetting",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '新 增',
      subData: {
        id: null,
        ageStageId: '',
        sex: '',
        memberAgeBindRoleConfigs: [],
      },
      ageDataSource: [],
      roleDataSource: [],
      sexDataSource: [{id: 0, name: '女'}, {id: 1, name: '男'}],
      formModelRules: {
        ageStageId: [{required: true, message: '请选择年龄段', trigger: 'blur'},],
        sex: [{required: true, message: '请选择性别', trigger: 'blur'},],
        memberAgeBindRoleConfigs: [{required: true, message: '请选择角色', trigger: 'blur'},],
      }
    }
  },
  created() {
    this.getAgeList()
    this.getRoleList()
    if (this.dataObj.id) {
      this.title = '编 辑'
      this.subData.id = this.dataObj.id
      this.subData.ageStageId = this.dataObj.ageStageId
      this.subData.sex = this.dataObj.sex
      this.subData.memberAgeBindRoleConfigs = this.dataObj.memberRoleIds.split(',').map(item => parseInt(item))
    } else {
      this.title = '新 增'
    }

  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false);
    },
    handleSave() {
      this.$refs.formModelRef.validate(valid => {
        if (valid) {
          let bean = JSON.parse(JSON.stringify(this.subData))
          bean.memberAgeBindRoleConfigs = bean.memberAgeBindRoleConfigs.map(item => ({
            memberRoleId: item
          }))
          this.post(this.api.healthMap.updateMemberRole, bean).then((res) => {
            if (res.data.code === '200') {
              this.$message.success('更新成功!');
              this.$parent.getList();
              this.modalClose();
            }
          })

        }
      })
    },
    getAgeList() {
      this.post(this.api.healthMap.getSelectAgeStageList).then((res) => {
        if (res.data.code === '200') {
          this.ageDataSource = res.data.object
        }
      })
    },
    getRoleList() {
      this.post(this.api.healthMap.getSelectMemberRoleList).then((res) => {
        if (res.data.code === '200') {
          this.roleDataSource = res.data.object
        }
      })
    }
  },
}
</script>

<style scoped>

</style>
